<template>
    <div id="myclass">
        <div class="title">章节列表</div>
        <div class="classbox">
            <div class="item">
                <div class="classtitle">
                    <el-link type="primary"><i class="el-icon-video-play"></i> {{ classname }}</el-link>
                    <div class="tab">
                        <el-table
                            :data="classInfo"
                            style="width: 100%;margin-bottom: 20px;"
                            row-key="id"
                            border
                            default-expand-all
                            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                            <el-table-column
                            prop="name"
                            label="课程名称"
                            >
                                
                            </el-table-column>
                            <el-table-column
                            prop="video"
                            label="视频连接"
                       
                           >
                            <template slot-scope="scope">
                                    <el-link type="primary" :href="scope.row.video" target="_blank">点击观看</el-link>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="mobile"
                            label="查看子章节">
                            <template slot-scope="scope">
                                    <el-button type="primary" size="mini" @click="showChild(scope.row)">点击查看</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>

        <!-- dialog -->
        <zhang-dialog :DialogData="DialogData" :FormData="FormData"></zhang-dialog>
    </div>
</template>

<script>
    import ZhangDialog from "@/components/dialog/ZhangDialog"
    export default {
        data() {
            return {
                classList: [],
                classname: "",
                classInfo: [],
                DialogData: {
                    show: false,
                    
                },
                FormData: {}
            }
        },
        computed: {
            token() {
                return localStorage.token;
            }
        },
        components: {
            ZhangDialog,
        },
        mounted () {
            this.getClass();
        },
        methods: {
            async  getClass() {
                let res = await this.$axios.post("/port/user/mychapter", { token: this.token })
                console.log(res);
                this.classname = res.data.data.name
                this.classInfo = res.data.data.chapter
            },
            // 展示子章节
            async showChild( item ) {
                let res = await this.$axios.post("/port/user/xiaochapter", { token: this.token, id: item.id})
                if (res.data.data) {
                    this.FormData = res.data.data
                    this.DialogData = {
                        show: true,
                    }
                } else {
                    this.$message.error("暂无子章节")
                }
                
                
            },
        },
    }
</script>

<style lang="scss" scoped>
#myclass {
    width: 800px;
    box-sizing: border-box;
    .title {
        width: 100%;
        box-sizing: border-box;
        padding-left: 30px;
        font-size: 24px;
        font-weight: bold;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #aaa;
    }
    .classbox {
        width: 100%;
        box-sizing: border-box;
        .item {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            .tab {
                margin: 10px 0;
            }
        }
    }
}
</style>